/*
 * @Author: Wilbur
 * @Date: 2019-08-20 10:22:36
 * @Last Modified by: along
 * @Last Modified time: 2020-07-13
 */

<template>
    <div class="container jingang-list-container">
        <div class="operation-wrapper">
            <el-button
                type="primary"
                @click="fnAddClick"
                size="small"
                style="margin-left:-16px"
            >
                添加商品组
            </el-button>
        </div>
        <el-table
            :data="tableData"
            height="100%"
            class="tableData"
            style="width: 100%;"
        >
            <el-table-column
                header-align="left"
                align="center"
                :width="50"
                label="序号">
                <template slot-scope="scope">
                    <div class="table-index">
                        {{ scope.$index + 1 }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="cate_name"
                show-overflow-tooltip
                label="商品组名称"/>
            <el-table-column
                prop="goods_num"
                show-overflow-tooltip
                label="商品数量">
                <template slot-scope="scope">
                    <span :class="scope.row.goods_num == 0 ? 'num-active' : ''">{{ scope.row.goods_num }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="cate_no"
                show-overflow-tooltip
                label="商品">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        @click="handleRoute('GoodsList', {type_no: '*', sub_type_no: scope.row.cate_no, is_cate: true, is_group: 1})">查看商品
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="recommend_goods_num"
                show-overflow-tooltip
                label="是否设置精选"
                :width="120"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                    >
                        <span
                            @click="handleRoute('GoodsList', {type_no: '*', sub_type_no: scope.row.cate_no, is_cate: true, cate_recommend: 1, is_group: 1})"
                            v-if="scope.row.recommend_goods_num !== '' && Number(scope.row.recommend_goods_num) > 0 "
                        >是,查看({{ scope.row.recommend_goods_num }})</span>
                        <span
                            style="color:#1D2023"
                            v-else>否</span>
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="no_type_goods_num"
                show-overflow-tooltip
                label="无分类商品"
                :width="110"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                    >
                        <span
                            @click="handleRoute('GoodsList', {sub_type_no: scope.row.cate_no, cate_type_no: 'none', is_group: 1, is_cate: true})"
                        >查看({{ scope.row.no_type_goods_num }})</span>
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="cate_type_num"
                show-overflow-tooltip
                label="分类管理">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                    >
                        <span
                            @click="handleRoute('shopManage', {cate_no: scope.row.cate_no})"
                        >分类({{ scope.row.cate_type_num }})</span>
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="custom_area_list"
                show-overflow-tooltip
                label="所属金刚区"
                :formatter="emptyFormatter"
                :width="130"
            >
                <template slot-scope="scope">
                    <div v-if="scope.row.custom_area_list.length > 0">
                        {{ scope.row.custom_area_list | setCustom }}
                    </div>
                    <div v-else>--</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="activity_list"
                show-overflow-tooltip
                label="所属活动区"
                :formatter="emptyFormatter"
                :width="130"
            >
                <template slot-scope="scope">
                    <div v-if="scope.row.activity_list.length > 0">
                        {{ scope.row.activity_list | setCustom }}
                    </div>
                    <div v-else>--</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                min-width="140"
                label="创建时间"
            >
                <template slot-scope="scope">
                    <template v-if="scope.row.create_time">{{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</template>
                    <template v-else>--</template>
                </template>
            </el-table-column>
            <el-table-column
                prop="date"
                label="操作"
                :width="160"
                fixed="right"
            >
                <template slot-scope="scope">
                    <div class="el_btn">
                        <el-button
                            type="text"
                            @click="fnEditClassify(scope.row)">编辑</el-button>
                        <el-button
                            type="text"
                            style="margin-left:10px;"
                            @click="fnDelMaterial(scope.row)">
                            删除
                        </el-button>
                        <el-button
                            type="text"
                            style="margin-left:10px;"
                            @click="handleRoute('GoodsList', {type_no: '*', sub_type_no: scope.row.cate_no, is_cate: true})">
                            设置精选
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div> -->
        <!-- 添加商品组弹窗 -->
        <el-dialog
            title="商品组"
            width="475px"
            :visible.sync="dialogAddVisible">
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm">
                <el-form-item
                    label="商品组名称"
                    prop="cate_name">
                    <el-input
                        v-model="ruleForm.cate_name"
                        class="add-dialog-input"
                        size="small"
                        style="width:317px"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogAddVisible = false"
                    size="small"
                    style="width:100px;height:32px"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    @click="submitForm('ruleForm')"
                    size="small"
                    style="width:100px;height:32px;margin-left:60px"
                    :disabled="!ruleForm.cate_name"
                >
                    确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        var checkTypeLogo = (rule, value, callback) => {
            if (this.ruleForm.cate_logo == '') {
                return callback(new Error('请上传分类图片'));
            }else{
                callback();
            }
        };

        return {
            authResult: {},
            tableData: [],
            filterData: {
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            escape: escape,
            sessionTicket: localStorage.getItem('sessionTicket'),
            dialogAddVisible: false,
            typeList: [],
            selectList: [],
            ruleForm: {
                cate_name: '',
                type: '1',
                cate_no: '',
            },
            typeDisabled: false,
            rules: {
                cate_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择课程分类', trigger: 'change' }
                ],
            }
        };
    },
    filters: {
        setCustom (val) {
            let list = [];

            val.map(item => {
                list.push(item.title);
            });

            return list.join();
        }
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [{title: "APP后台",},{title: '商城'},{title: '商品组'}]);
        this.getTableData();
    },
    mounted() {
    },
    methods: {
        fnAddClick() {
            this.ruleForm = {
                cate_name: '',
                cate_sort: '',
                cate_no: '',
                cate_logo: ''
            };
            this.typeDisabled = false;
            this.dialogAddVisible = true;
        },
        fnEditClassify(row) {
            this.ruleForm = {
                cate_name: row.cate_name,
                cate_sort: row.cate_sort,
                cate_no: row.cate_no,
                cate_logo: row.cate_logo
            };
            this.dialogAddVisible = true;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let data = {};

                    data.cate_no = this.ruleForm.cate_no;
                    data.cate_name = this.ruleForm.cate_name;
                    this.fnSetData(data);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        fnSetData(data) {
            this.$post('/student/shop_goods_cate%5Csave', data, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                    this.resetForm('ruleForm');
                    this.dialogAddVisible = false;
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        fnDelMaterial(row) {
            this.$confirm('删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_goods_cate%5Cdelete', {
                    cate_no: row.cate_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.$post('/student/shop_goods_cate%5Cget_list', {
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                }
            });
        },

        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            let routeData = this.$router.resolve(obj);

            window.open(routeData.href, '_blank');
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    box-shadow: border-box;
    overflow: hidden;
    padding: 0 15px 20px 15px;
}
.tableData {
    width: calc(100vw - 48px);
}
.add-dialog-input{
    width: 350px;
}
.operation-wrapper {
    display: flex;
    padding: 12px 23px;
    background-color: #fff;
    .select-container{
        flex: 1;
    }
    .el-button {
        float: right;
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;
    .sub-logo{
        width: 50px;
        height: 50px;
    }
    .num-active {
        color:#FF0000;
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.el_btn {
    display: flex;
    height: 40px;
    align-items: center;
}
.dialog-footer {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: -20px;
}
</style>
<style lang="less">
.jingang-list-container {
    tbody {
        .cell {
            display: flex;
            align-items: center;
            height: 48px;
        }
    }
    .upload-good-image{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        display: flex;
        border: 1px dashed #d9d9d9;
        border-radius: 4px;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        color: #8c939d;
        img{
            width: 100px;
            height: 100px;
        }
    }
    .el-dialog__header {
            padding-top: 10px;
            box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }
            .el-icon-close:before {
                color: rgb(194,194,194);
                font-size: 17px;
                font-weight: bold;
            }
            .el-dialog__headerbtn {
                top: 14px;
            }
        }
}
</style>
